'use client';

import { useEffect, useState } from 'react';
import MobilePlaylist from '@/app/components/playlist/mobile-playlist';
import PlaylistContainer from '@/app/components/playlist/playlist-container';
import VideoPlayer from '@/app/components/video/video-player';

interface PlayInfo {
  url: string;
  name: string;
}

interface ResponsiveVideoPlayerProps {
  playList: PlayInfo[];
  initialIndex: number;
  videoId: number;
  onReady?: (isReady: boolean) => void;
  onEpisodeChange?: (index: number) => void;
}

export default function ResponsiveVideoPlayer({ 
  playList, 
  initialIndex, 
  videoId,
  onReady,
  onEpisodeChange
}: ResponsiveVideoPlayerProps) {
    const [isDesktop, setIsDesktop] = useState(false);
  
  useEffect(() => {
    // 检测屏幕尺寸
    const handleResize = () => {
      setIsDesktop(window.innerWidth >= 1024); // lg breakpoint
    };
    
    // 初始化
    handleResize();
    
    // 监听窗口大小变化
    window.addEventListener('resize', handleResize);
    
    // 通知容器组件布局已经准备好
    onReady?.(true);
    
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, [onReady]);
  

  
  if (isDesktop) {
    // 大屏布局
    return (
      <div className="flex flex-row w-full shadow-lg">
        {/* 左侧播放器 */}
        <div className="w-[70%] xl:w-3/4 relative z-10">
          <div className="player-container rounded-l-lg overflow-hidden">
            <VideoPlayer
              playList={playList}
              initialIndex={initialIndex}
              videoId={videoId}
              onEpisodeChange={onEpisodeChange}
            />
          </div>
        </div>

        {/* 右侧播放列表 */}
        {playList.length > 0 && (
          <div className="w-[30%] xl:w-1/4 relative z-0">
            <PlaylistContainer
              playList={playList}
              currentIndex={initialIndex}
              videoId={videoId}
              onEpisodeChange={(index) => {
                onEpisodeChange?.(index);
              }}
            />
          </div>
        )}
      </div>
    );
  } else {
    // 小屏布局
    return (
      <div className="w-full">
        {/* 播放器 */}
        <div className="w-full mb-4 relative z-10">
          <div className="player-container overflow-hidden">
            <VideoPlayer
              playList={playList}
              initialIndex={initialIndex}
              videoId={videoId}
              onEpisodeChange={onEpisodeChange}
            />
          </div>
        </div>

        {/* 播放列表 */}
        {playList.length > 1 && (
          <div className="w-full mt-4 px-3 relative z-20 mb-4">
            <MobilePlaylist
              videoId={videoId}
              playList={playList}
              currentPlayIndex={initialIndex}
              onEpisodeChange={onEpisodeChange}
            />
          </div>
        )}
      </div>
    );
  }
} 